<style>
    .card{
        margin-top: 20px;
    }
    #message-nav{
        padding: 10px;
    }
    #info-block td{
        border:0;
    }
</style>
<div id="message-content" class="container animated fadeIn">
    <div class="center-block col-sm-6">
        <div class="card">
          <div class="card-header">
              <i class="fa fa-wrench"> </i>
              <strong>ئۇچۇرۇم</strong>
          </div>
           <div class="card-block">
                <table id="message-nav" class="table">
                    <tr>
                        <td>نامى </td>
                        <td id="td-name"> </td>
                    </tr>
                    <tr>
                        <td>ئادېرىسى </td>
                        <td id="td-address"></td>
                    </tr>
                    <tr>
                        <td>تېلىفون نومۇرى</td>
                        <td id="td-tel"></td>
                    </tr>
                    <tr>
                        <td>ھوقوقى </td>
                        <td id="td-admin"></td>
                    </tr>
                </table>
               <input type="text" class="form-control" id="message-id" placeholder="نومۇر كىرگۈزۈڭ " style="width:120px;margin-bottom: 5px;">
           </div>
            <div class="card-footer">
                <button type="button" class="btn btn-info">تەپسىلاتى</button>
                <button type="button" id="btn-change-info" class="btn btn-primary"><i class="fa fa-edit"></i>ئۆزگەرتىمەن </button>
             </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card">
            <div class="card-header">
                <i class="fa fa-wrench"></i>
                <strong>تەھرىرلەش</strong>
            </div>
            <div class="card-block" id="info-block">
              <table class="table">
                  <tr>
                      <td>نامى</td>
                      <td><input id="input-change-name" type="text" value="قادىرجان"/></td>
                  </tr>
                  <tr>
                      <td>ئادېرىسى</td>
                      <td><input id="input-change-location" type="text" value="تۇرپان"/></td>
                  </tr>
                  <tr>
                      <td>تېلىفون نومۇرى</td>
                      <td><input id="input-change-tel" type="text" value="13899105353"/></td>
                  </tr>
                  <tr>1
                      <td>ھوقوقى</td>
                      <td><input id="input-change-role" type="text" value="ئامبارچى"/></td>
                  </tr>
              </table>
            </div>
                <div class="card-footer">
                    <button type="button" id="change-info-submit" class="btn btn-primary"><i class="fa fa-check-square"></i>جەزملەشتۈرۈش </button>
                </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $.get("http://localhost:8080/tulpar/manager/one?mId=1",function (response) {
                console.log(response);
                console.log(response.data.mName);
                $("#td-name").html(response.data.mName);
                $("#td-address").html(response.data.mDistrict.ugName);
                $("#td-tel").html(response.data.mTel);
                $("#td-admin").html(response.data.mRole);
            });
        });
    $("button").click(function () {
        var inputID = $("#message-id").val();
        $.get("http://localhost:8080/tulpar/manager/one?mId="+inputID,function (response) {
                console.log(response);
            $("#td-name").html(response.data.mName);
            $("#td-address").html(response.data.mDistrict.ugName);
            $("#td-tel").html(response.data.mTel);
            $("#td-admin").html(response.data.mRole);
        });
    });
    $("#btn-change-info").click(function(){
        var inputID = $("#message-id").val();
        $.get("http://localhost:8080/tulpar/manager/one?mId="+inputID,function (response){
           console.log(response);
            console.log($("#input-change-name"),response.data.mName);
            $("#input-change-name").val(response.data.mName);
            $("#input-change-location").val(response.data.mDistrict.ugName);
            $("#input-change-tel").val(response.data.mTel);
            $("#input-change-role").val(response.data.mRole);
        });
    });
</script>


